<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02_元素的显示模式</title>
    <style>
      /*  
        块元素：
            1.在页面中独占一行，不会与任何元素功用一行，是从上到下排列的
            2.默认宽度，撑满父元素
            3.默认高度，由内容撑开
            4.可以通过css设置宽高
        行内元素: 例如 span
            1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从做到右排列
            2.默认宽度-，由内容撑开
            3.默认高度-，由内容撑开
            4.无法通过css设置宽高
        行内块元素: 例如 img
            1.在页面中不独占一行，一行中不能容纳下的行内元素，会在下一行继续从做到右排列
            2.默认宽度-，由内容撑开
            3.默认高度-，由内容撑开
            4.可以通过css设置宽高
      */
      #d1 {
        background-color: skyblue;
      }

      #d2 {
        background-color: orange;
      }

      #d3 {
        background-color: pink;
      }

      .one {
        background-color: orange;
      }

      .two {
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div id="d1">商会录制不看剧</div>
    <div id="d2">续上空留马行处</div>
    <div id="d3">风里雨里我在这里等你</div>
    <hr />
    <span class="one">人之初</span>
    <span class="two">性本善</span>

    <hr />
    <img src="../../imgs/a.jpeg" alt="" width="200px" />
  </body>
</html>
